<template>
  <div class="white">
    <el-button type="primary" size="mini" icon="el-icon-plus" @click="treaTingSearrch()">新增</el-button>
    <el-button type="primary" size="mini" icon="el-icon-upload2"
      >导出</el-button
    >
    <el-button type="primary" size="mini" icon="el-icon-download"
      >导入</el-button
    >
    <el-dropdown click="add">
      <span class="el-dropdown-link">
        批量删除 <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>
          <el-button type="text" @click="dialogVisible = true"
            ><i class="el-icon-delete"></i>删除</el-button></el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <!-- 批量删除消息弹框 -->
<el-dialog
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <h4 class="el-icon-question
"  icon-color="#faad14"
>确认删除</h4>
  <h6>是否删除选中数据?</h6>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
    <classification :headerData="headerData" :tableData="tableData" > 
    
    </classification>

  </div>
</template>
<script>
import classification from "@/components/xiaohei/classifiCation.vue"
import {treaTing} from "@/api/category"
export default {
  name: "category",
  data() {
    return {
        dialogVisible: false,
        pageNo:'',
        pageSize:"",
           tableData: [{
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          children: [{
              id: 31,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              id: 32,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
          }]
        }, {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        tableData1: [{
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          hasChildren: true
        }, {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
      headerData: [
        {
          prop: "name",
          label: "分类名称",
        },
        {
          prop: "dictCode",
          label: "分类编码",
        },
        {
          prop: "operation",
          label: "操作",
          slot: true,
        },
      ],
    };

  },
    methods: {
      treaTingSearrch(){
        let _self = this
        let data ={
           pageNo:1,
           pageSize:5
        }
        console.log(data);
       treaTing(data).then((res)=>{
        console.log(res);
       })
      }
    },
  components: {
    classification,
  },
  mounted(){
    this.treaTingSearrch()
  }
};
</script>
<style>
.white {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.white .el-dropdown-link {
  cursor: pointer;
  color: #409eff;
  margin-left: 20px;
  border: 2px solid #409eff;
  border-radius: 4px;
  padding: 4px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>